<template>
  <div class="lawyer-info">
    <div class="bg-c-fff">
      <h2 class="box-title rel">个人信息管理</h2>
      <form @submit.prevent="onSubmitBtn">
        <ul>
          <li>
            <span>律师姓名：</span>
            <p class="dib p">{{lawyerName}}</p>
          </li>
          <li>
            <span>律师姓别：</span>
            <select v-model="six">
              <option value="">请选择性别</option>
              <option value="男">男</option>
              <option value="女">女</option>
            </select>
          </li>
          <li>
            <span>律师照片：</span>
            <input type="button" value="选择文件" class="upload-css" id="selectBtn">
            <input type="button" value="上传" class="upload-css" @click="startUpload">
            <div class="dib remark">支持.jpg、.jpeg、.gif、.png图片格式，大小不超过5M</div>
            <div class="preview-box">
              <div class="preview" v-if="photoUrl===''">
                <div class="db auto tc">待上传</div>
              </div>
              <div class="preview-img" v-else>
                <img :src="photoUrl">
              </div>
            </div>
          </li>
          <li>
            <span>联系电话：</span>
            <input type="number" v-model="phone" class="input-css input-w1">
            <i class="iconfont icon-asterisk"></i>
          </li>
          <li>
            <span>办公地址：</span>
            <address-select ref="addressData"></address-select>
          </li>
          <li>
            <span>所属律所：</span>
            <p class="dib p">{{lawfirmName}}</p>
          </li>
          <li>
            <span>执业年限：</span>
            <select v-model="year">
              <option value="">请选择执业年限</option>
              <option value="1-3年">1-3年</option>
              <option value="3-5年">3-5年</option>
              <option value="5年以上">5年以上</option>
            </select>
          </li>
          <li>
            <span class="field-label">擅长领域：</span>
            <div class="field-box">
              <div v-for="i in fieldCount" class="field-item">
                <field-select ref="fieldData"></field-select>
              </div>
            </div>
          </li>
          <li class="button">
            <span></span>
            <button type="button" class="blue-button xl-btn-css" @click="addField">添加领域</button>
            <button type="button" class="white-button xl-btn-css" @click="removeField" v-show="fieldCount>1">删除领域</button>
          </li>
          <li>
            <span>个人简介：</span>
            <textarea class="vt" v-model="individualResume"></textarea>
          </li>
          <li class="button">
            <span></span>
            <button type="submit" class="blue-button">保存</button>
            <button type="button" class="white-button" @click="cancel">取消</button>
          </li>
        </ul>
      </form>
    </div>
  </div>
</template>
<script type="text/javascript ">
import AddressSelect from '../components/Address/Address'
import FieldSelect from '../components/Field/Field.vue'
import UploaderManager from '../components/UploaderManager'
export default {
  components: {
    AddressSelect,
    FieldSelect
  },
  data() {
    return {
      lawyerName: '',
      lawfirmName: '',
      six: '',
      lawyerSex: '',
      phone: '',
      year: '',
      individualResume: '',
      uploader: null,
      photoUrl: '',
      fieldCount: 1
    }
  },
  mounted() {
    this.$http.get('/memberLawyer/query/lawyerInfo', {
      params: {}
    }).then((data) => {
      if (data.data.httpCode === 200) {
        this.lawyerName = data.data.data.lawyerName
        if (data.data.data.lawyerSex === 0) {
          this.six = '男'
        }
        if (data.data.data.lawyerSex === 1) {
          this.six = '女'
        }
        this.phone = data.data.data.phone
        if (data.data.data.address) {
          this.$refs.addressData.province = data.data.data.address.split(',')[0]
          this.$refs.addressData.state = data.data.data.address.split(',')[1]
          this.$refs.addressData.area = data.data.data.address.split(',')[2]
          console.log(this.$refs.addressData.province)
          console.log(this.$refs.addressData.state)
          console.log(this.$refs.addressData.area)
        }
        this.lawfirmName = data.data.data.firmName
        this.year = data.data.data.careerYear
        this.individualResume = data.data.data.individualResume
        this.photoUrl = data.data.data.lawyerPic
        let fieldArr = data.data.data.field.split(';')
        this.fieldCount = fieldArr.length
        this.$nextTick(() => {
          this.$refs.fieldData.forEach((field, i) => {
            let fieldStr = fieldArr[i]
            let itemFieldArr = fieldStr.split(',')
            field.classA = itemFieldArr[0]
            field.classB = itemFieldArr[1]
          })
        })
      } else {
        this.$toasted.show(data.data.msg)
      }
    }).catch((err) => {
      console.log(err)
    })
    this.initUploader()
  },
  methods: {
    addField() {
      this.fieldCount++
        if (this.fieldCount > 3) {
          this.$toasted.show('最多可以添加三个擅长领域')
          this.fieldCount = 3
        }
    },
    removeField() {
      if (this.fieldCount > 1) {
        this.fieldCount--
      }
    },
    startUpload() {
      if (this.uploader.startUpload()) {

      } else {
        this.$toasted.show('正在上传文件，请稍后再试')
      }
    },
    initUploader() {
      this.uploader = new UploaderManager('lawyer-photo', 'selectBtn', (url) => {
        this.photoUrl = url
        this.$toasted.show('上传成功')
      }, (msg) => {
        this.$toasted.show(msg)
      })
    },
    onSubmitBtn() {
      if (!this.six) {
        this.$toasted.show('请选择性别')
        return
      }
      if (!this.phone) {
        this.$toasted.show('请输入联系方式')
        return
      }
      if (!this.$refs.addressData.province) {
        this.$toasted.show('请选择工作省份')
        return
      }
      if (!this.$refs.addressData.state) {
        this.$toasted.show('请选择工作城市')
        return
      }
      if (!this.$refs.addressData.area) {
        this.$toasted.show('请选择工作区/县')
        return
      }
      if (!this.year) {
        this.$toasted.show('请选择执业年限')
        return
      }
      if (!this.photoUrl) {
        this.$toasted.show('请上传您的照片')
        return
      }
      if (this.six === '男') {
        this.lawyerSex = 0
      }
      if (this.six === '女') {
        this.lawyerSex = 1
      }
      let fieldArr = []
      this.$refs.fieldData.forEach(field => {
        if (field.classB) {
          fieldArr.push(field.classA + ',' + field.classB)
        }
      })
      if (fieldArr.length === 0) {
        this.$toasted.show('请至少选择一个擅长领域')
        return
      }
      if (!this.individualResume) {
        this.$toasted.show('请填写个人简介')
        return
      }
      let fieldStr = fieldArr.join(';')
      this.$http.post('/memberLawyer/update/lawyer/info', {
        lawyerSex: this.lawyerSex,
        lawyerPic: this.photoUrl,
        phone: this.phone,
        address: this.$refs.addressData.province + ',' + this.$refs.addressData.state + ',' + this.$refs.addressData.area,
        careerYear: this.year,
        field: fieldStr,
        individualResume: this.individualResume
      }).then(data => {
        if (data.data.httpCode === 200) {
          this.$store.dispatch('getLawyerInfo').then(data => {
            if (data.data.httpCode === 200) {}
          }, err => {
            console.log(err)
          })
          this.$toasted.show('保存成功！')
          this.$router.push('/welcome')
        } else {
          console.log(data.data.msg)
        }
      }).catch(() => {
        this.$toasted.show('')
      })
    },
    cancel() {
      this.$toasted.show('未进行保存')
    }
  },
  computed: {}
}

</script>
<style type="text/css " scoped>
.field-label {
  margin-top: 8px;
  vertical-align: top;
}

.field-item {
  margin-bottom: 10px;
}

.field-box {
  display: inline-block;
  overflow: hidden;
}

.lawyer-info ul {
  padding-bottom: 70px;
}

.lawyer-info ul li {
  padding: 10px 0;
}

.lawyer-info ul li span {
  width: 194px;
  display: inline-block;
  text-align: right;
  color: #666666;
  margin-right: 20px;
}

select {
  width: 121px;
  height: 35px;
}

.remark {
  width: 403px;
  color: #a5a5a5;
}

.upload-css {
  background-color: #d8e7ff;
  border: 1px solid #2a508c;
  width: 121px;
  height: 40px;
  color: #01378c;
  cursor: pointer;
}

.upload-btn {
  left: -154px;
  top: 0;
  cursor: pointer;
  width: 151px;
}

.icon-asterisk {
  position: relative;
  right: 35px;
  color: #ec5303;
  font-size: 25px;
  top: 3px;
}

.preview-box {
  margin-left: 217px;
  margin-top: 10px;
}

.preview {
  width: 120px;
  height: 120px;
  border: 1px solid #cccccc;
  margin-right: 70px;
}

.input-w1 {
  width: 385px;
}

.p {
  color: #666;
}

.preview div {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  border: 1px solid #cccccc;
  margin-top: 10px;
  line-height: 100px;
  color: #ccc;
}


.button button {
  width: 150px;
  line-height: 35px;
  margin-right: 25px;
}


textarea {
  width: 380px;
  height: 230px;
  padding: 10px 8px;
}

input::-webkit-input-placeholder {
  color: #a5a5a5;
}

.preview-img {
  width: 300px;
}

.preview-img img {
  width: 150px;
  height: auto;
}

</style>
